<script lang="ts" setup>
import { ref } from 'vue'
import { cartoonStatus } from '@/types/enum'
import { useUserStore } from '@/stores/useUserStore'
defineOptions({
  name: 'cartoon-figure'
})
const props = defineProps({
  isDialogShow: {
    type: Boolean,
    default: true
  },
  status: {
    default: cartoonStatus.Stand
  }
})

const emits = defineEmits(['click'])
const handleClick = () => {
  emits('click')
}
const { getUserInfo } = useUserStore()
const { nickname } = getUserInfo()
const message = ref(`你好呀${nickname}~,我是编程喵!欢迎学习编程喵~点击和我互动吧!`)
</script>

<template>
  <section class="container" @click="handleClick">
    <!-- 对话气泡框 -->
    <bubble-container :message="message" :isDialogShow="props.isDialogShow"></bubble-container>
    <img src="@/assets/gifs/stand.gif" alt="" v-if="props.status === cartoonStatus.Stand" />
    <img src="@/assets/gifs/smile.gif" alt="" v-else-if="props.status === cartoonStatus.Smile" />
    <img src="@/assets/gifs/cry.gif" alt="" v-else-if="props.status === cartoonStatus.Cry" />
    <img src="@/assets/gifs/talk.gif" alt="" v-else-if="props.status === cartoonStatus.Talk" />
  </section>
</template>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 450px;
  height: 450px;
  scale: 0.8;
  z-index: 999;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
